<template>
  <div class="inputData" style="margin-top: 30px">
    <el-card>
      <table
        style="width: 100%"
        align="center"
        cellspacing="0"
        class="inputTable"
      >
        <tr>
          <td rowspan="2" style="width: 80px">户主<br />信息</td>
          <td>姓名</td>
          <td style="text-align: center" id="name">
            <el-input
              v-model="check.name"
              autocomplete="off"
              placeholder="户主姓名"
            ></el-input>
          </td>
          <td>联系电话</td>
          <td id="tel">
            <el-input
              v-model="check.tel"
              ref="age"
              autocomplete="off"
              placeholder="联系电话"
            ></el-input>
          </td>
          <td style="width: 80px">性别</td>
          <td>
            <el-radio v-model="check.sex" label="男" style="width: 25%"
              >男</el-radio
            >
            <el-radio v-model="check.sex" label="女" style="width: 25%"
              >女</el-radio
            >
          </td>
          <td>年龄</td>
          <td>
            <el-input
              v-model.number="check.age"
              ref="age"
              autocomplete="off"
              placeholder="年龄"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>身份证号码</td>
          <td id="idCard">
            <el-input
              v-model="check.idCard"
              autocomplete="off"
              @blur="queryIdCardFunction(check.idCard, $event)"
              ref="idCardText"
            >
            </el-input>
          </td>
          <td>户口所在地</td>
          <td colspan="2">
            <el-select
              v-model="check.townName"
              placeholder="请选择乡镇街道"
              style="width: 40%; float: left"
              @change="townChange"
            >
              <el-option label="请选择乡镇街道" value></el-option>
              <el-option
                v-for="item in check.townList"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
            <el-select
              v-model="check.villageName"
              placeholder="请选择村组社区"
              @change="villageChange"
              style="width: 40%; float: left"
            >
              <el-option label="请选择村组社区" value></el-option>
              <el-option
                v-for="item in villageList"
                :key="item.code"
                :label="item.name"
                :value="item.name"
              ></el-option>
            </el-select>
          </td>
          <td colspan="3">
            <el-input
              v-model="check.address"
              autocomplete="off"
              @input="getInputValue($event)"
              style="float: left"
            >
              <el-select
                v-model="check.villageType"
                slot="append"
                placeholder="组或社"
                @change="getGroupName($event)"
                style="width: 100px; float: left"
              >
                <el-option label="组" value="组"></el-option>
                <el-option label="社" value="社"></el-option>
              </el-select>
            </el-input>
          </td>
        </tr>
      </table>

      <!-- 拟申请宅基地及建房（规划许可）情况 -->
      <table
        style="width: 100%"
        align="center"
        cellspacing="0"
        class="inputTableLast"
      >
        <tr>
          <td rowspan="6" style="width: 80px">农房<br />情况&nbsp;</td>
          <td>宅基地面积（㎡）</td>
          <td style="text-align: center">
            <el-input
              v-model="check.applyHomesteadArea"
              ref="applyHomesteadArea"
              autocomplete="off"
              placeholder="宅基地面积"
            >
            </el-input>
          </td>
          <td>房基占地面积（㎡）</td>
          <td>
            <el-input
              v-model="check.applyFoundationArea"
              autocomplete="off"
              placeholder="房基占地面积"
            ></el-input>
          </td>
          <td>权属证书号</td>
          <td colspan="3">
            <el-input
              v-model="check.bookId"
              autocomplete="off"
              placeholder="权属证书号"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>地址</td>
          <td colspan="6" style="text-align: left">
            <div>
              <div
                style="
                  float: left;
                  padding-right: 0;
                  margin-left: 10px;
                  margin-top: 7px;
                  text-aglin: center;
                "
              >
                {{ applyAddress }}
              </div>
              <el-input
                v-model="check.applyAddress"
                style="float: left; width: 30%; padding-left: 0; margin-left: 0"
                placeholder="地址"
              >
              </el-input>
            </div>
          </td>
        </tr>

        <tr>
          <td rowspan="2">四至</td>
          <td>东至</td>
          <td colspan="2">
            <el-input
              v-model="check.east"
              autocomplete="off"
              placeholder="东至"
            ></el-input>
          </td>
          <td>南至</td>
          <td colspan="2">
            <el-input
              v-model="check.south"
              autocomplete="off"
              placeholder="南至"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>西至</td>
          <td colspan="2">
            <el-input
              v-model="check.west"
              autocomplete="off"
              placeholder="西至"
            ></el-input>
          </td>
          <td>北至</td>
          <td colspan="2">
            <el-input
              v-model="check.north"
              autocomplete="off"
              placeholder="北至"
            ></el-input>
          </td>
        </tr>

        <tr>
          <td>建筑面积（㎡）</td>
          <td>
            <el-input
              v-model="check.applyHousingArea"
              autocomplete="off"
              placeholder="建筑面积"
            ></el-input>
          </td>
          <td>建筑层数（层）</td>
          <td>
            <el-input
              v-model.number="check.applyLayer"
              autocomplete="off"
              placeholder="建筑层数"
            ></el-input>
          </td>
          <td>建筑高度（m）</td>
          <td colspan="2">
            <el-input
              v-model="check.applyHight"
              autocomplete="off"
              placeholder="建筑高度"
            ></el-input>
          </td>
        </tr>
        <tr>
          <td>地类</td>
          <td colspan="2">
            <el-radio-group v-model="check.landType">
              <el-radio :label="'1'" style="margin-top: 15px"
                >建设用地</el-radio
              >
              <el-radio :label="'2'" style="margin-top: 15px">未利用地</el-radio
              ><br />
              <el-radio
                :label="'3'"
                style="margin-top: 15px; margin-left: -72px"
                >农用地</el-radio
              >
              <el-radio :label="'4'" style="margin-top: 15px">其他</el-radio>
            </el-radio-group>
          </td>

          <td>建房时间</td>
          <td>
            <el-date-picker
              v-model="check.buildYear"
              type="year"
              placeholder="选择建房时间"
              prefix-icon="null"
              value-format="yyyy年"
              format="yyyy年"
            >
            </el-date-picker>
          </td>

          <td>建筑结构</td>
          <td>
            <el-select v-model="check.bulidingStructure" placeholder="建筑结构">
              <el-option label="混合" value="混合"></el-option>
              <el-option label="砖瓦" value="砖瓦"></el-option>
            </el-select>
          </td>
        </tr>
        <tr></tr>
        <tr>
          <td rowspan="4">相关<br />材料&nbsp;</td>
          <td>上传</td>
          <td colspan="6">
            <el-upload
              ><el-button type="primary" class="el-icon-upload"></el-button
            ></el-upload>
          </td>
        </tr>
        <tr>
          <td rowspan="3">已有材料</td>
          <td colspan="6"></td>
        </tr></table
    ></el-card>
    <el-card style="margin-top: 1%; margin-bottom: 1%; text-align: center">
      <el-button
        type="primary"
        style="width: 100px; font-size: 18px"
        @click="commitPro('formInline')"
        >提交</el-button
      >
      <el-button
        type="danger"
        style="width: 100px; font-size: 18px"
        @click="cancle"
        >取消</el-button
      ></el-card
    >
  </div>
</template>
<script>
import config from "@/config/config";
import store from "@/vuex/store";
import {
  getChildrenAddress,
  selectByCode,
  getChildrenAddressByName,
} from "@/api/addressDictionary";
export default {
  data() {
    return {
      villageList: [],
      addressName: config.addressName,
      townState: false,
      applyAddress: "",
      check: {},
      currentCode: store.getters.currentCode,
    };
  },
  created: function () {
    this.check = this.$route.query;
    this.showTown();
    this.getAddress();
  },
  methods: {
    commitPro() {
      this.$router.go(-1);
    },
    cancle() {
      this.$router.go(-1);
    },
    queryIdCardFunction(idCard, e) {
      //是否重复
      if (idCard) {
        if (this.check.idCard.charAt(16) % 2 == 0) {
          this.check.sex = "女";
          console.log(this.formInline.sex);
          this.check.sex = "女";
        } else {
          this.check.sex = "男";
          console.log(this.check.sex);
          this.check.sex = "男";
        }
        //年龄   6 - 9
        var ageStr = idCard.substring(6, 10);
        var ageInt = parseInt(ageStr);
        var myDate = new Date();
        var tYear = myDate.getFullYear();
        this.check.age = tYear - ageInt;
        console.log(this.check.age);
        // this.formInline.age = 20;
      } else {
        this.$message({
          showClose: true,
          message: "请输入身份证号",
          type: "info",
        });
        return;
      }
    },
    getAddress() {
      if (this.currentCode.length > 9) {
        getChildrenAddressByName("黔江区").then((townList) => {
          this.check.townList = townList.data.data;
        });
      } else {
        getChildrenAddress(this.currentCode).then((villageList) => {
          this.check.villageList = villageList.data.data;
        });
      }
    },
    showTown() {
      if (this.currentCode.length > 9) {
        this.townState = true;
      } else {
        this.townState = false;
        this.check.townCode = this.currentCode;
      }
    },
    villageChange() {
      var townNameAndVillageName = this.check.townName + this.check.villageName;
      console.log(townNameAndVillageName);
      this.addressName += townNameAndVillageName;
      this.$forceUpdate();
      this.check.houseLocation = this.addressName;
      this.check.address = this.addressName;
      this.addressName = config.addressName;
    },
    townChange(index) {
      if (this.check.townName) {
        getChildrenAddressByName(this.check.townName)
          .then((villageList) => {
            this.villageList = villageList.data.data;
            this.check.villageName = this.villageList[0].name;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    getInputValue(e) {
      this.$forceUpdate();
    },
    getGroupName(e) {
      var temp = this.check.villageType;
      if (
        null == this.check.address ||
        "" == this.check.address ||
        undefined == this.check.address
      ) {
        this.check.address = temp;
      } else {
        this.check.address += temp;
      }
      temp = "";
    },
  },
};
</script>
<style>
.inputData .el-input .el-input__inner {
  border: none;
}
.inputTable {
  border-right: 1pt solid gray;
  text-align: center;
}
.inputTable td {
  border: 1pt solid gray;
  border-bottom: none;
  border-right: none;
  height: 60px;
}
.inputTableLast {
  border-right: 1pt solid gray;
  border-bottom: 1pt solid gray;
  text-align: center;
}
.inputTableLast td {
  border: 1pt solid gray;
  border-bottom: none;
  border-right: none;
  height: 60px;
}
.inputData .el-input__inner {
  font-size: 18px;
}
.inputData .el-radio__label {
  font-size: 18px;
}
</style>